<style lang="scss" scoped>
    .my-table /deep/ .el-table__expanded-cell{
        padding:0 !important;
    }
</style>
<template>
    <ui-main :title="$route.name">
        <!--组件示例-->
        <div class="item one">
            <div class="ui-table-expand">
                <el-table v-nested-table  :height="300"
                    ref="table"
                    :data="tabObj.tableData"
                    style="width: 100%"
                    border
                    :span-method="arraySpanMethod"
                    current-row-key="id"
                    class="my-table">
                    <el-table-column type="expand" class="demo-table-inner">
                        <template slot-scope="props">
                            <el-table ref="details" :data="details" :show-header="false">
                                <el-table-column prop="" label="" width="47px"></el-table-column>
                                <el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
                                <el-table-column align="center" label="预警级别" prop="warn_level" width="100">
                                    <template slot-scope="scope">
                                            <span v-if="details[scope.$index].warn_level === 4"
                                                class="ui red label"
                                                style="height:20px;width:20px;"></span>
                                        <span v-if="details[scope.$index].warn_level === 3"
                                            class="ui orange label"
                                            style="height:20px;width:20px;"></span>
                                        <span v-if="details[scope.$index].warn_level === 2"
                                            class="ui yellow label"
                                            style="height:20px;width:20px;"></span>
                                        <span v-if="details[scope.$index].warn_level === 1"
                                            class="ui blue label"
                                            style="height:20px;width:20px;"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="ht_no" label="隐患编号" width="200"></el-table-column>
                                <el-table-column align="center" prop="flag_name" label="隐患状态" width="120"></el-table-column>
                                <el-table-column align="center" label="隐患级别" width="120">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.hidden_level == '1'" class="t-warning">{{scope.row.hidden_level_name}}</span>
                                        <span v-if="scope.row.hidden_level == '2'" class="t-danger">{{scope.row.hidden_level_name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="left" prop="hidden_content" label="隐患内容"></el-table-column>
                                <el-table-column align="center" prop="is_into" label="应急预案" width="180">
                                    <template slot-scope="scope">
                                        <el-tag v-if="details[scope.$index].is_into == 0" type="info" size="small">未纳入
                                        </el-tag>
                                        <el-tag v-if="details[scope.$index].is_into == 1" type="info" size="small">已纳入
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="操作" width="160"><!--增加一个按钮宽度就加50px反之减少50px-->
                                    <template slot-scope="scope">
                                        <ui-tab-btn name="查看"></ui-tab-btn>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="序号" type="index" width="60" :index="1"></el-table-column>
                    <el-table-column align="left" header-align="center" label="预警级别" width="100">
                        <template slot-scope="scope">
                            <a expand href="javascript:" @click="toggleRowExpansion(scope)">{{ scope.row.title_name}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="隐患编号" width="200"></el-table-column>
                    <el-table-column align="center" label="隐患状态" width="120"></el-table-column>
                    <el-table-column align="center" label="隐患级别" width="120"></el-table-column>
                    <el-table-column align="center" label="隐患内容"></el-table-column>
                    <el-table-column align="center" label="纳入情况" width="180"></el-table-column>
                    <el-table-column align="center" label="操作" width="160">
                        <template slot-scope="scope" v-if="scope.row.self"></template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--说明文档-->
        <div class="item flex-5">
            <ui-load-md file="nestedTable"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                tabObj:{
                    tableData: null
                },
                details: null
            }
        },
        mounted() {
            setTimeout(() => {
                this.tabObj.tableData = [
                    {
                        "begin_date": 1545378925000,
                        "check_style_name": "",
                        "create_date": 1545378970000,
                        "data_from": "1",
                        "details": [],
                        "id": "4002802867cfc0c80167cfc3bbf50002",
                        "is_deleted": "0",
                        "self": false,
                        "title_name": "凯里新能燃气(黄锦惠) 于 2018-12-21 15:55 至 2018-12-21 15:55 进行了安全大检查,共发现隐患 2 条"
                    }
                ]
                this.details = [
                    {
                        "audit_date": 1545380004000,
                        "audit_person": "管理员",
                        "audit_person_id": "7959770041BB66BCE050A8A80AA81812",
                        "audit_situation": "1",
                        "cancel_date": 1545380034000,
                        "cancel_person": "管理员",
                        "cancel_person_id": "7959770041BB66BCE050A8A80AA81812",
                        "days": 4,
                        "flag": "6",
                        "flag_name": "销号",
                        "hidden_address": "1",
                        "hidden_content": "1",
                        "hidden_level": "1",
                        "hidden_level_name": "一般隐患",
                        "hidden_part": "1",
                        "ht_id": "4002802867cfc0c80167cfc3bbf50002",
                        "ht_no": "QD2018000001",
                        "id": "4002802867cfc0c80167cfc4216e0004",
                        "is_into": "0",
                        "reform_concent": "11111",
                        "reform_count": 0,
                        "reform_department": "22222",
                        "reform_end_date": 1545379001000,
                        "reform_finish_date": 1545321600000,
                        "reform_funds": 1111,
                        "reform_person": "1111",
                        "reform_require": "1111",
                        "reform_type": "1",
                        "review_concent": "121121",
                        "review_customer_id": "4002802d66ed4a6b0166ed4ddf920001",
                        "review_date": 1545321600000,
                        "review_person": "黄锦惠",
                        "review_person_id": "8a8a8ab7675d133b01676237455b00f5",
                        "review_situation": "1",
                        "sort": 0,
                        "warn_level": 3
                    },
                    {
                        "audit_date": 1545382788000,
                        "audit_person": "管理员",
                        "audit_person_id": "7959770041BB66BCE050A8A80AA81811",
                        "audit_situation": "1",
                        "cancel_date": 1545384290000,
                        "cancel_person": "管理员",
                        "cancel_person_id": "7959770041BB66BCE050A8A80AA81811",
                        "days": 4,
                        "flag": "6",
                        "flag_name": "销号",
                        "hidden_address": "23312",
                        "hidden_content": "3",
                        "hidden_level": "1",
                        "hidden_level_name": "一般隐患",
                        "hidden_part": "12121",
                        "ht_id": "4002802867cfc7f90167cfd4fead000f",
                        "ht_no": "QD2018000003",
                        "id": "4002802867cfc7f90167cfd5b8230012",
                        "is_into": "1",
                        "reform_concent": "112",
                        "reform_count": 0,
                        "reform_department": "31313",
                        "reform_end_date": 1545380279000,
                        "reform_finish_date": 1545321600000,
                        "reform_funds": 1121,
                        "reform_person": "11",
                        "reform_require": "121",
                        "reform_type": "1",
                        "review_concent": "1121",
                        "review_customer_id": "4002802d66ed4a6b0166ed4ddf920001",
                        "review_date": 1545321600000,
                        "review_person": "黄锦惠",
                        "review_person_id": "8a8a8ab7675d133b01676237455b00f5",
                        "review_situation": "1",
                        "sort": 0,
                        "warn_level": 3
                    },
                    {
                        "days": 4,
                        "flag": "1",
                        "flag_name": "隐患登记",
                        "hidden_address": "2",
                        "hidden_content": "2",
                        "hidden_level": "2",
                        "hidden_level_name": "重大隐患",
                        "hidden_part": "2",
                        "ht_id": "4002802867cfc0c80167cfc3bbf50002",
                        "ht_no": "QD2018000002",
                        "id": "4002802867cfc0c80167cfc421a30008",
                        "is_into": "0",
                        "reform_count": 0,
                        "reform_department": "22222",
                        "reform_end_date": 1545379001000,
                        "reform_finish_date": 1545379001000,
                        "reform_require": "1111",
                        "reform_type": "1",
                        "sort": 1,
                        "warn_level": 3
                    },
                    {
                        "audit_date": 1545382792000,
                        "audit_person": "管理员",
                        "audit_person_id": "7959770041BB66BCE050A8A80AA81811",
                        "audit_situation": "1",
                        "days": 4,
                        "flag": "3",
                        "flag_name": "审核",
                        "hidden_address": "131313",
                        "hidden_content": "4",
                        "hidden_level": "2",
                        "hidden_level_name": "重大隐患",
                        "hidden_part": "3442",
                        "ht_id": "4002802867cfc7f90167cfd4fead000f",
                        "ht_no": "QD2018000004",
                        "id": "4002802867cfc7f90167cfd5b8490016",
                        "is_into": "1",
                        "reform_count": 0,
                        "reform_department": "31313",
                        "reform_end_date": 1545380279000,
                        "reform_finish_date": 1545380279000,
                        "reform_require": "121",
                        "reform_type": "1",
                        "sort": 1,
                        "warn_level": 3
                    }
                ]
            },1000)
        },
        methods: {
            // 点击后展开或关闭子表并懒加载数据
            toggleRowExpansion(scope) {
                this.$refs.table.toggleRowExpansion(scope.row)
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 2) {
                    return [1, 6];
                }
                if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
                    return [0, 0];
                }
            }
        }
    }
</script>
